package modules

import (
	"github.com/templui/templui/internal/components/badge"
	"github.com/templui/templui/internal/components/breadcrumb"
	"github.com/templui/templui/internal/ui/icons"
	"strings"
)

type PageWrapperProps struct {
	Name        string
	Description templ.Component
	Tailwind    bool
	VanillaJS   bool
	Breadcrumbs Breadcrumbs
	HideSource  bool
}

type Breadcrumbs struct {
	Items []BreadcrumbItem
}

type BreadcrumbItem struct {
	Text string
	Path string
}

templ PageWrapper(p PageWrapperProps) {
	<div class="mb-8">
		<div class="mb-4">
			@breadcrumb.Breadcrumb() {
				@breadcrumb.List() {
					for i, path := range p.Breadcrumbs.Items {
						@breadcrumb.Item() {
							if i != 0 {
								@breadcrumb.Separator()
							}
							if i == len(p.Breadcrumbs.Items)-1 {
								@breadcrumb.Page(breadcrumb.ItemProps{Current: true}) {
									{ path.Text }
								}
							} else {
								@breadcrumb.Link(breadcrumb.LinkProps{
									Href: path.Path,
								}) {
									{ path.Text }
								}
							}
						}
					}
				}
			}
		</div>
		<h1 class="text-3xl font-bold mb-2">{ p.Name }</h1>
		<p class="mb-4 text-muted-foreground">
			@p.Description
		</p>
		<div class="flex gap-2 items-baseline">
			{{
				componentName := strings.ToLower(strings.ReplaceAll(p.Name, " ", ""))
				srcURL := templ.SafeURL("https://github.com/templui/templui/tree/main/internal/components/" + componentName)
			}}
			if !p.HideSource {
				<a href={ templ.SafeURL(srcURL) } target="_blank" class="flex">
					@badge.Badge(badge.Props{
						Class: "flex gap-2",
					}) {
						@wrappedicon.GitHub(16)
						Source
					}
				</a>
			}
			if p.Tailwind {
				@badge.Badge(badge.Props{
					Variant: badge.VariantSecondary,
					Class:   "flex gap-2",
				}) {
					@wrappedicon.Tailwind(16)
					Tailwind CSS
				}
			}
			if p.VanillaJS {
				@badge.Badge(badge.Props{
					Variant: badge.VariantSecondary,
					Class:   "flex gap-2",
				}) {
					@wrappedicon.JS(16)
					JavaScript
				}
			}
		</div>
	</div>
	<div class="space-y-8">
		{ children... }
	</div>
}
